<template>
  <div class="bottom-content flex-row">
    <div class="left-main">
      <div class="left-item">
        <div class="title-row flex-row">
          <span class="title">实践技能</span>
          <!-- <span class="setting">详细设置</span> -->
        </div>
        <div class="form flex-row">
          <div class="form-item flex-row">
            <span class="label">任务开关</span>
            <el-switch
              v-model="data.task_is_opened"
              @change="setTraining('skill', 'task_is_opened')"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div>
          <div class="form-item flex-row">
            <span class="label">技能解析</span>
            <el-switch
              v-model="data.task_answer_analyse_is_opened"
              @change="setTraining('skill', 'task_answer_analyse_is_opened')"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div>
        </div>
      </div>
      <div class="left-item">
        <div class="title-row flex-row">
          <span class="title">听力训练</span>
          <!-- <span class="setting">详细设置</span> -->
        </div>
        <div class="form flex-row">
          <div class="form-item flex-row">
            <span class="label">听力开关</span>
            <el-switch
              v-model="data.hearing_is_opened"
              @change="setTraining('listen', 'hearing_is_opened')"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div>
          <div class="form-item flex-row">
            <span class="label">首次阅读</span>
            <el-switch
              v-model="data.hearing_first_read"
              @change="setTraining('listen', 'hearing_first_read')"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div>
          <div class="form-item flex-row">
            <span class="label">译文开关</span>
            <el-switch
              v-model="data.hearing_translate_is_opened"
              @change="setTraining('listen', 'hearing_translate_is_opened')"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div>
          <div class="form-item flex-row">
            <span class="label">答案解析</span>
            <el-switch
              v-model="data.hearing_answer_analyse_is_opened"
              @change="setTraining('listen', 'hearing_answer_analyse_is_opened')"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div>
        </div>
      </div>
      <div class="left-item">
        <div class="title-row flex-row">
          <span class="title">口语测评</span>
          <!-- <span class="setting">详细设置</span> -->
        </div>
        <div class="form flex-row">
          <div class="form-item flex-row">
            <span class="label">口语开关</span>
            <el-switch
              v-model="data.oral_is_opened"
              @change="setTraining('oral', 'oral_is_opened')"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div>
          <div class="form-item flex-row">
            <span class="label">配音开关</span>
            <el-switch
              v-model="data.oral_dub_is_opened"
              @change="setTraining('oral', 'oral_dub_is_opened')"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div>
          <div class="form-item flex-row">
            <span class="label">译文开关</span>
            <el-switch
              v-model="data.oral_translate_is_opened"
              @change="setTraining('oral', 'oral_translate_is_opened')"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div>
        </div>
      </div>
      <div class="left-item">
        <div class="title-row flex-row">
          <span class="title">案例分析</span>
          <!-- <span class="setting">详细设置</span> -->
        </div>
        <div class="form flex-row">
          <div class="form-item flex-row">
            <span class="label">案例开关</span>
            <el-switch
              v-model="data.g_case_is_opened"
              @change="setTraining('g-case', 'g_case_is_opened')"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div>
          <div class="form-item flex-row">
            <span class="label">范文解析</span>
            <el-switch
              v-model="data.g_case_answer_analyse_is_opened"
              @change="setTraining('g-case', 'g_case_answer_analyse_is_opened')"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div>
        </div>
      </div>
      <div class="left-item">
        <div class="title-row flex-row">
          <span class="title">综合案例</span>
          <!-- <span class="setting">详细设置</span> -->
        </div>
        <div class="form flex-row">
          <div class="form-item flex-row">
            <span class="label">综合开关</span>
            <el-switch
              v-model="data.m_case_is_opened"
              @change="setTraining('m-case', 'm_case_is_opened')"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div>
          <div class="form-item flex-row">
            <span class="label">案例解析</span>
            <el-switch
              v-model="data.m_case_answer_analyse_is_opened"
              @change="setTraining('m-case', 'm_case_answer_analyse_is_opened')"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="right-main">
      <div class="title">章节设置</div>
      <ul class="tab-list flex-row">
        <li class="tab">章节名称</li>
        <li class="tab">学习</li>
        <li class="tab">解析</li>
      </ul>
      <div class="content">
        <div class="list-lesson" v-for="(item, index) of [1,2,3,4]" :key="index">
          <div class="item-lesson flex-row" v-for="(item, index) of [1,2,3,4]" :key="index">
            <div class="item">Lesson 1 Making An Orientation</div>
            <div class="item">
              <el-switch
                v-model="data.task_answer_analyse_is_opened"
              @change="setTraining('task_answer_analyse_is_opened')"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </div>
            <div class="item">
              <el-switch
                v-model="data.task_answer_analyse_is_opened"
              @change="setTraining('task_answer_analyse_is_opened')"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </div>
          </div>
      </div>
      </div>

    </div> -->
  </div>
</template>

<script>
import {
  getTraining,
  setTraining
} from '@/api/lesson-setting/training'
import { mapGetters } from 'vuex'

export default {
  name: 'index',
  data () {
    return {
      data: {},
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }]
    }
  },
  props: {
    schoolId: {
      type: Number,
      default: 0
    }
  },
  computed: {
    ...mapGetters([
      'loginInfo'
    ])
  },
  components: {},
  mounted () {
    this.getTraining()
  },
  methods: {
    async getTraining () {
      const res = await getTraining({
        class_id: this.loginInfo.classId,
        resource_lesson_id: this.loginInfo.resourceLessonId,
        school_id: this.schoolId,
        tea_id: this.loginInfo.userId
      })
      if (res.code === '200') {
        const obj = {}
        Object.assign(obj, {
          task_is_opened: res.data.pubData.task_is_opened === '1',
          task_answer_analyse_is_opened: res.data.pubData.task_answer_analyse_is_opened === '1',
          hearing_is_opened: res.data.pubData.hearing_is_opened === '1',
          hearing_first_read: res.data.pubData.hearing_first_read === '1',
          hearing_translate_is_opened: res.data.pubData.hearing_translate_is_opened === '1',
          hearing_answer_analyse_is_opened: res.data.pubData.hearing_answer_analyse_is_opened === '1',
          oral_is_opened: res.data.pubData.oral_is_opened === '1',
          oral_dub_is_opened: res.data.pubData.oral_dub_is_opened === '1',
          oral_translate_is_opened: res.data.pubData.oral_translate_is_opened === '1',
          g_case_is_opened: res.data.pubData.g_case_is_opened === '1',
          g_case_answer_analyse_is_opened: res.data.pubData.g_case_answer_analyse_is_opened === '1',
          m_case_is_opened: res.data.pubData.m_case_is_opened === '1',
          m_case_answer_analyse_is_opened: res.data.pubData.m_case_answer_analyse_is_opened === '1'
        })
        this.data = obj
      } else {
        this.$message.error(res.message)
      }
    },
    async setTraining (url, key) {
      const param = {
        class_id: this.loginInfo.classId,
        resource_lesson_id: this.loginInfo.resourceLessonId,
        tea_id: this.loginInfo.userId,
        school_id: this.schoolId,
        key,
        value: this.data[key] ? '1' : '0'
      }
      const res = await setTraining(url, param)
      if (res.code === '200') {
        this.$message.success('设置成功')
      } else {
        this.$message.error(res.message)
      }
    }
  }
}
</script>
<style scoped lang="scss">
.course-setting {
  .bottom-content {
    width: 100%;
    margin-bottom: 30px;
    .left-main {
      // width:452px;
      width: 100%;
      // height:842px;
      height: auto;
      background:rgba(255,255,255,1);
      border:1px solid rgba(229,229,229,1);
      border-radius:0px 0px 5px 5px;
      .left-item {
        padding: 30px 22px;
        border-bottom:1px dashed rgba(229,229,229,1);
        .title-row {
          .title {
            font-size:18px;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(16,29,55,1);
          }
          .setting {
            font-size:14px;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(0,156,246,1);
            cursor: pointer;
          }
        }
        .form {
          width: 100%;
          flex-wrap: wrap;
          text-align: left;
          .form-item {
            width: 43%;
            justify-content: flex-start;
            margin-top: 35px;
            .label {
              min-width:56px;
              font-size:14px;
              font-family:PingFang SC;
              font-weight:400;
              color:rgba(16,29,55,1);
              margin-right: 10px;
            }
          }
        }
      }

    }
    .right-main {
      width:728px;
      height:842px;
      background:rgba(255,255,255,1);
      border:1px solid rgba(229,229,229,1);
      .title {
        width:100%;
        padding: 20px 0 30px 20px;
        font-size:18px;
        font-family:PingFang SC;
        font-weight:400;
        color:rgba(16,29,55,1);
      }
      .tab-list {
        width: 100%;
        height:44px;
        background:rgba(245,245,246,1);
        line-height: 44px;
        padding: 0 20px;
        .tab {
          width: 15%;
          text-align: center;
          &:first-child {
            width: 70%;
            text-align: left;
          }
        }
      }
      .content {
        height: 730px;
        overflow-y: scroll;
        background: #fff;
        .list-lesson {
          margin: 0 20px;
          border-bottom: 1px dashed #E5E5E5;
          .item-lesson {
            .item {
              height:50px;
              line-height: 50px;
              width: 15%;
              text-align: center;
              &:first-child {
                width: 70%;
                text-align: left;
              }
            }
          }
        }
      }
    }
  }
}

</style>
